﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />

	<STYLE type="text/css">
		td {
			text-align: center
		}

		tbody, td, tfoot, th, thead, tr {
			border-color: inherit;
			background-color: #ffffbb;
			border-style: solid;
			border-width: 0;
		}
	</STYLE>
</head>
<body>
	<div id="app">
		<table width="100%">
			<tr>
				<td colspan="2" style="text-align: left">
					<font color="black">
						您正在做的业务是：人力资源--薪酬标准管理--薪酬发放登记(负责人控制)
					</font>

				</td>
			</tr>

		</table>
		<br>
		薪酬总数:{{num}}，
		总人数:{{count}}，基本薪酬总数:{{salary}}，实发总额:{{pSalary}}
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="index" label="序号" ></el-table-column>
			<el-table-column prop="kinName" label="机构名称" ></el-table-column>
			<el-table-column prop="count" label="人数" ></el-table-column>
			<el-table-column prop="salary" label="基本薪酬总额(元)" ></el-table-column>
			<el-table-column label="登记">
				<template #default="scope">
					<el-button size="small" v-on:click="handleEdit(scope.row)">
						登记
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<p>
			&nbsp;
		</p>
	</div>
</body>
</html>
<script>
    const { createApp, ref, reactive } = Vue
    var app = createApp({
        setup() {
			const tableData = ref([])
			const salary = ref(0)//基本薪酬总额
			const pSalary = ref(0)//实发总额
			const count = ref(0)//总人数
			const num = ref(0)//薪酬总数

            function fill(){
				axios.get("/SG/GetNewSG").then(res =>{
					console.info(res.data)
					tableData.value = res.data
					for	(var i = 0; i < tableData.value.length; i++){
						salary.value += tableData.value[i].salary;
						pSalary.value += tableData.value[i].pSalary
						count.value += tableData.value[i].count
					}
					num.value = tableData.value.length
				}).catch(Error =>{
					console.info(Error)
				})
            }
            fill();

			function handleEdit(row){
				window.location.href = "/SG/SGRegistration?kindId="+row.kindId+"&kindName="+row.kinName;
			}

            return {
				tableData,salary,pSalary,count,num,handleEdit
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
